<template>
  <div>
    <div class="equipment" @click="visible">
      <div class="equipment-title">设备</div>
      <div class="equipment-content">
        <div class="equipment-name">{{ DeviceInfo.DeviceId }}</div>
        <el-row :gutter="20" justify="space-between">
          <el-col :span="12">
            <div class="equipment-state">
              <i
                :class="{
                  grey:
                    DeviceInfo.CommunicationState == '未知' ||
                    DeviceInfo.CommunicationState == '空闲',
                  green: DeviceInfo.CommunicationState == '运行',
                  red: DeviceInfo.CommunicationState == '故障',
                }"
              ></i>
              通讯 {{ DeviceInfo.CommunicationState }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="equipment-state">
              <i
                :class="{
                  grey:
                    DeviceInfo.CommunicationState == '未知' ||
                    DeviceInfo.CommunicationState == '空闲',
                  green: DeviceInfo.CommunicationState == '运行',
                  red: DeviceInfo.CommunicationState == '故障',
                }"
              ></i>
              运行 {{ DeviceInfo.RunningState }}
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible"
      title="设备详情"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <!-- <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              编号
            </template>
            {{ DeviceInfo.DeviceId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              状态
            </template>
            <el-tag size="small">
              {{ DeviceInfo.CommunicationState }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              负责人
            </template>
            负责人
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <vab-icon icon="time-line" />
              申请时间
            </template>
            2023-10-1
          </el-descriptions-item>
        </el-descriptions> -->
        <el-row :gutter="20" style="margin-top: 30px">
          <el-col :span="12">
            <el-descriptions direction="vertical" :column="2" border>
              <template v-for="item in DeviceBasicInfo">
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    {{ item.Key }}
                  </template>
                  {{ item.Value }}
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-descriptions direction="vertical" :column="2" border>
                  <el-descriptions-item label="">
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      通讯状态
                    </template>
                    <el-tag size="small">
                      {{ DeviceRealtimeInfo.CommunicationState }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="运行状态">
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      运行状态
                    </template>
                    <el-tag size="small">
                      {{ DeviceRealtimeInfo.RunningState }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="脱机状态">
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      脱机状态
                    </template>
                    <el-tag size="small">
                      {{ DeviceRealtimeInfo.OffLineStat }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      {{ DeviceRealtimeInfo.PartId }}
                    </template>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-user"></i>
                      工单编号
                    </template>
                    {{ DeviceRealtimeInfo.OrderId }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :span="24" style="margin-top: 30px">
                <el-table
                  border
                  :data="DeviceRealtimeInfo.PartQueue"
                  style="width: 100%"
                >
                  <el-table-column prop="PartId" label="零件编号" width="180" />
                  <el-table-column
                    prop="OrderId"
                    label="所属工单"
                    width="180"
                  />
                  <el-table-column prop="OPId" label="工序编号" />
                </el-table>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button type="primary" @click="handleEdit21()">生成日志</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="日志信息"
      :visible.sync="dialogVisible222"
      width="30%"
      :before-close="handleClose222"
    >
      <el-timeline reverse>
        <el-timeline-item
          v-for="(item, index) in LogList"
          :key="index"
          :timestamp="index"
        >
          <p>零件编号：{{ item.PartId }}</p>
          <p>产品编号：{{ item.ProductId }}</p>
          <p>开始时间：{{ item.StartTime }}</p>
          <p>结束时间：{{ item.EndTime }}</p>
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible222 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible222 = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { DeviceDetailsInfo, GetDeviceLogById } from '@/api/equipment'

  export default {
    props: {
      DeviceInfo: {
        type: Object,
        default: {
          DeviceId: '',
          CommunicationState: '',
          RunningState: '',
          OfflineState: '',
        },
      },
    },
    data() {
      return {
        dialogVisible222: false,
        LogList: [],
        DeviceBasicInfo: [],
        DeviceRealtimeInfo: {},
        dialogVisible: false,
        tableData: [
          {
            date: 'P001',
            name: 'order1',
            address: 'OP10',
          },
          {
            date: 'P001',
            name: 'order1',
            address: 'OP10',
          },
          {
            date: 'P001',
            name: 'order1',
            address: 'OP10',
          },
        ],
      }
    },
    methods: {
      handleClose222() {
        this.dialogVisible222 = false
      },
      handleEdit21() {
        GetDeviceLogById({
          DeviceId: this.DeviceInfo.DeviceId,
          Count: 100,
        }).then((res) => {
          console.log(res)
          this.dialogVisible222 = true
          this.LogList = res.LogList
        })
      },
      visible() {
        this.dialogVisible = true
        DeviceDetailsInfo({ DeviceId: this.DeviceInfo.DeviceId }).then(
          (res) => {
            this.DeviceBasicInfo = res.DeviceBasicInfo
            this.DeviceRealtimeInfo = res.DeviceRealtimeInfo
          }
        )
      },
      handleClose() {
        this.dialogVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .equipment {
    border-radius: 10px;
    box-shadow: 0px 2px 15px rgba(231, 231, 231, 0.7);
    margin-bottom: 30px;

    &-title {
      display: block;
      width: 100%;
      height: 38px;
      color: #fff;
      text-align: center;
      line-height: 38px;
      background-color: #2f54eb;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    &-content {
      padding: 20px 15px;
    }

    &-name {
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    &-state {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .grey {
      background-color: #cccccc;
      display: block;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      border-radius: 50%;
      flex: none;
    }

    .green {
      flex: none;
      background-color: #07c160;
      display: block;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      border-radius: 50%;
    }

    .red {
      flex: none;
      background-color: #ff4d4f;
      display: block;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      border-radius: 50%;
    }
  }
</style>
